<script setup>
import {getByStatus,updateStatus} from "@/apis/publish";
import {userInfoStore} from "@/stores/user";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
//tab列表
const tabTypes = [
    {name: "publishing" ,label: "审核中"},
    {name: "published" ,label: "已发布"},
    {name: "unpublished" ,label: "已下架"},
    
];
const activeName =ref();
//发布列表
const productList = ref([]);
//加载
const isLoading = ref(true);
//获取发布商品列表
const getPublishedList = async (status) =>{
    try {
        let tjForm = {
            userId: userInfoStore().userInfo.userId,
            status: status
        }
        const res = await getByStatus(tjForm);
        productList.value = res.data;
        isLoading.value = false;
    } catch (error) {
        ElMessage.error("获取发布商品列表失败");
        isLoading.value = false;
    }
};
//进入页面就默认加载已发布的商品
onMounted(() => getPublishedList(0));
//改变展示按钮
const tabChange = (type) => {
    //console.log('当前的状态值',type,"将要变为",type === 'published' ? 1: 2);
    isLoading.value = true;
    const status = type; //类型为已发布则为1，已下架则为2
    //获取列表
    getPublishedList(status);
}

const formatStatus = (status) =>{
        if(status === 1)
    {
        return '已发布';
    }
    else if (status === 2)
    {
        return '已下架';
    }
    else {
        return '审核中';
    }
    
}

//更改商品状态
const toggleStatus =async (product, newStatus) => {
try {
    const res = await updateStatus(product.productId,newStatus);
    if(res.code=== 200){
        ElMessage.success(newStatus === 1 ? "商品已上架" : "商品已下架");
        // activeName.value = newStatus === 1 ? 'published' : 'unpublished';
        const currentStatus = newStatus === 1 ? 2 : 1;
        getPublishedList(currentStatus);
    }else{
        ElMessage.error(res.message || "操作失败");
    }
} catch (error) {
    ElMessage.error("操作失败");
    console.log("操作失败");
}
}
</script>
<template>
    <div class="order-container">
        <el-tabs v-model="activeName" @tab-change="tabChange">
            <!-- tab切换 -->
            <el-tab-pane v-for="item in tabTypes" :key="item.name" :label="item.label" />

            <!-- 展示 -->
             <div class="main-container">
                <div v-if="isLoading" class="holder-container">
                    <img src="../../../assets/images/loading.gif">
                </div>
                <div class="holder-container" v-else-if="productList.length === 0">
                    <el-empty :description="`暂无商品`"></el-empty>
                </div>
                <div v-else>
                    <!-- 商品列表 -->
                     <div class="order-item" v-for="product in productList" :key="product.id">
                        <div class="head">
                            <span>发布时间: {{ product.createdAt }}</span>
                            <span>商品编号: {{ product.productId }}</span>
                        </div>
                        <div class="body">
                            <div class="column goods">
                                <ul>
                                    <li>
                                        <a href="/" class="image">
                                            <img :src="product.productImg">
                                        </a>
                                        <div class="info">
                                            <p class="name ellipsis-2">
                                                {{ product.title }}
                                            </p>
                                            <p class="attr ellipsis">
                                                <span>{{ product.description }}</span>
                                            </p>
                                        </div>
                                        <div class="column amount">￥{{ product.price?.toFixed(2) }}</div>
                                        
                                    </li>
                                </ul>
                            </div>
                            <div class="column amount">
                                <p>库存：{{ product.stock }}</p>
                            </div>
                            <div class="column state">
                                <p>{{ formatStatus(product.status) }}</p>
                            </div>
                            
                            <div class="column action">
                                <el-button v-if="product.status != 0"
                                @click="toggleStatus(product,product.status === 1 ? 2 : 1)"
                                type="primary"
                                size="small">
                                    {{ product.status ===1 ? '下架商品' : '重新上架' }}
                                </el-button>
                            </div>
                        </div>
                     </div>
                </div>
             </div>
        </el-tabs>
    </div>
</template>
<style lang="scss" scoped>
.order-container{
    padding: 10px 20px;
    .main-container {
        min-height: 500px;
        .holder-container {
            min-height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .order-item {
        margin-bottom: 20px;
        border: 1px solid #f5f5f5;
        .head {
            height: 50px;
            line-height: 50px;
            background: #f5f5f5;
            padding: 0 20px;
            overflow: hidden;

            span {
                margin-right: 20px;
            }
        }
        .body {
            display: flex;
            align-items: stretch;

            .column{
                border-left: 1px solid #f5f5f5;
                text-align: center;
                padding: 20px;

                > p {
                    padding-top: 10px;
                }
                &:first-child {
                    border-left: none;
                }

                &.goods {
                    flex: 1;
                    padding: 0;
                    align-self: center;

                    ul{
                        li{
                            border-bottom: 1px solid #f5f5f5;
                            padding: 10px;
                            display: flex;

                            &:last-child{
                                border-bottom: none;
                            }
                           .image {
                            width: 70px;
                            height: 70px;
                            border: 1px solid #f5f5f5;
                           } 

                           .info{
                            width: 220px;
                            text-align: left;
                            padding: 0 10px;

                            p{
                                margin-bottom: 5px;
                                &.name {
                                    height: 38px;
                                }
                                &.attr {
                                    color: #999;
                                    font-size: 12px;

                                    span {
                                        margin-right: 5px;
                                    }
                                }
                            }
                           }
                           .price {
                            width: 100px;
                           }
                           .count {
                            width: 80px;
                           }
                        }
                    }
                }

                &.state {
                    width: 120px;
                }
                &.amount {
                    width: 200px;
                }
                &.action{
                    width: 140px;
                     a{
                        display: block;
                        &:hover {
                            color: $xtxColor;
                        }
                     }
                }
            }

        }
    }
}

</style>